<template>
    <el-dialog title="热门链接" v-model="linkDialog" width="500" :close-on-click-modal = false :before-close="stopgame">
      <div style="height: 500px;">
        <el-row>
          <el-col :span="12">
            <ul class="link_list">
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://cn.vuejs.org/" target="_blank">vue官网</el-link></li>
              <li><el-link type="primary" href="https://opentiny.design/" target="_blank">TinyVue组件</el-link></li>
              <li><el-link type="primary" href="https://element-plus.org/" target="_blank">Element组件</el-link></li>
              <li><el-link type="primary" href="https://developer.mozilla.org/zh-CN/docs/MDN" target="_blank">MDN中文文档</el-link></li>
              <li><el-link type="primary" href="https://tongyi.aliyun.com/" target="_blank">通义千问</el-link></li>
              <li><el-link type="primary" href="https://www.hipdf.cn/" target="_blank">PDF工具</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
            </ul>
          </el-col>
          <el-col :span="12">
            <ul class="link_list">
              <li><el-link type="primary" href="https://nodejs.org/zh-cn" target="_blank">nodejs下载</el-link></li>
              <li><el-link type="primary" href="https://zh.snipaste.com/" target="_blank">snipaste截图工具下载</el-link></li>
              <li><el-link type="primary" href="https://code.visualstudio.com/" target="_blank">vscode下载</el-link></li>
              <li><el-link type="primary" href="https://sunlogin.oray.com/" target="_blank">向日葵下载</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
              <li><el-link type="primary" href="https://www.baidu.com" target="_blank">百度</el-link></li>
            </ul>
          </el-col>
        </el-row>
      </div>
  </el-dialog>
</template>
<script setup lang="ts" >
import { ref, nextTick, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElDialog } from "element-plus";
const router = useRouter();
const linkDialog = ref()





// --------------------------------------弹窗控制--------------------------------------
const props = defineProps({
  linkDialog: {
    type: Boolean,
    default: false
  }
});

const stopgame = () => {
    emitCloseEvent(false)
}

// 确保子组件能够响应 `linkDialog` 的变化
watch(() => props.linkDialog, (newValue) => {
    linkDialog.value = newValue;
});
const emitCloseEvent = (value:boolean) => {
  emit('update:linkDialog', value);
};
const emit = defineEmits(['update:linkDialog']);

</script>
<script lang="ts">
export default {
    name: "LinkJumpTool"
}

</script>
<style scoped>
.link_list li {
  margin-top: 10px;
  font-size: 24px;
}

</style>